<template>
  <div class="comment-item">
    <el-row>
      <!-- 左边头像 -->
      <ElCol :span="4">
        <div class="comment-photo">
          <!-- <img src="../img/gan.png" alt srcset> -->
          <my-photo
            :user="item"
            :userId="item.userId"
            :photo="item.photo"
            :userName="item.userName"
            line-height="50px"
            font-size="25px"
          ></my-photo>
        </div>
      </ElCol>
      <!-- 右边评论详情 -->
      <ElCol :span="20">
        <div class="item-detail">
          <div class="user">
            <span class="username cursor-pointer">{{item.userName}}</span>
            <span class="level">
              <el-rate
                v-model="item.rate"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              ></el-rate>
            </span>
          </div>
          <div class="content">{{item.content}}</div>
          <div class="comment-detail">
            <span class="floor">#{{totalRow-(pageNumber-1)*pageSize-index}}</span>
            <span class="time">{{item.time}}</span>
            <span href="#" class="reply" @click="toReply(item.id,item.userId,item.userName)">回复</span>
          </div>
          <!-- 评论回复区 -->
          <div class="reply-list">
            <div v-if="show">
              <div class="reply-item" v-for="(r,ri) in replys" :key="ri">
                <div class="top">
                  <span class="me userName cursor-pointer">{{r.srcName}}</span>
                  <span class="reply-to">回复</span>
                  <span class="you userName cursor-pointer">{{r.destName}} :</span>
                </div>
                <div class="reply-content">{{r.content}}</div>
                <div class="footer">
                  <span>{{r.time}}</span>
                  <span class="reply" @click="toReply(item.id,r.userId,r.srcName)">回复</span>
                </div>
              </div>
            </div>
            <!-- 评论展开区 -->
            <my-collapse
              :handleClick="nothing"
              btn-open-text="展开回复"
              btn-close-text="关闭回复"
              :myopen="open"
              :myclose="close"
            >
              <div v-if="!show">
                <div class="reply-item" v-for="(r,ri) in replys" :key="ri">
                  <div class="top">
                    <span class="me userName cursor-pointer">{{r.srcName}}</span>
                    <span class="reply-to">回复</span>
                    <span class="you userName cursor-pointer">{{r.destName}} :</span>
                  </div>
                  <div class="reply-content">{{r.content}}</div>
                  <div class="footer">
                    <span>{{r.time}}</span>
                    <span class="reply" @click="toReply(item.id,r.userId,r.srcName)">回复</span>
                  </div>
                </div>
                <el-pagination
                  layout="prev, pager, next"
                  :total="myTotalRow"
                  :current-page.sync="myPageNumber"
                  :page-size="myPageSize"
                ></el-pagination>
              </div>
            </my-collapse>
            <!-- whoName回复谁 id跳转锚点id -->
            <comment-post
              :whoName="whoName"
              v-model="content"
              :hidden="isReply"
              :id="'jump'+item.id"
              :replyto="whoName"
              :submit="submitComment"
            ></comment-post>
          </div>
        </div>
      </ElCol>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "comment-item",
  props: ["item", "totalRow", "pageSize", "pageNumber", "index"],
  data: function() {
    return {
      isReply: true,
      whoName: "",
      targetId: "",
      content: "",
      replys: [],
      myPageSize: 2,
      myPageNumber: 1,
      myTotalRow: 0,
      show: true
    };
  },
  methods: {
    toReply(id, targetId, name) {
      this.isReply = false;
      this.targetId = targetId;
      this.whoName = name;
      console.log(name);
      this.$nextTick(() => {
        document
          .querySelector("#jump" + id)
          .scrollIntoView({ block: "center" });
      });
    },
    submitComment() {
      this.axios
        .post("comment/reply", {
          commentId: this.item.id, //评论的id
          userId: this.$store.state.user.id,
          targetId: this.targetId,
          content: this.content
        })
        .then(res => {
          if (res.data.success) {
            this.$message.success("回复成功!");
            this.content = "";
            this.isReply = true;
            this.getReply();
          }
        });
    },
    getReply() {
      this.axios
        .post("comment/replyList", {
          id: this.item.id,
          pageNumber: this.myPageNumber,
          pageSize: this.myPageSize
        })
        .then(res => {
          this.replys = res.data.page.list;
          this.myTotalRow = res.data.page.totalRow;
          console.log(this.myTotalRow);
        });
    },
    open() {
      this.show = false;
      this.myPageSize = 8;
      this.getReply();
    },
    close() {
      this.show = true;
      this.myPageSize = 2;
      this.myPageNumber = 1;
      this.getReply();
    },
    nothing() {}
  },
  mounted() {
    this.getReply();
  },
  watch: {
    myPageNumber: function() {
      this.getReply();
    },
    item: function() {
      this.getReply();
    }
  }
};
</script>

<style lang="scss" scoped>
/* 头像单独抽离出来，因为评论列表也要用 */
.comment-post {
  margin-bottom: 20px;
}

.comment-photo {
  margin: 0 auto;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  overflow: hidden;
}
/* 评论项 */
.comment-item {
  //border-bottom: 1px solid #dcdfe6;
  /*用户名*/
  margin-bottom: 26px;
  .item-detail {
    border-bottom: 1px solid #dcdfe6;
    .username {
      color: #606266;
      margin-right: 10px;
      line-height: 30px;
    }
    .level {
      font-size: 11px;
      color: #909399;
    }
    .content {
      margin: 10px 0;
    }
    .comment-detail {
      padding-bottom: 10px;
      color: #909399;
      span {
        margin: 0 12px 0 0;
      }
      a {
        color: #909399;
        &:hover {
          color: #79bbff;
        }
      }
    }
    .reply-list {
      color: #909399;
      .reply-item {
        margin-top: 20px;
        padding-left: 10px;
        // border-bottom: 1px solid #dcdfe6;
        /*回复列表头部*/
        .top {
          color: #606266;
          .reply-to {
            color: #606266;
            margin: 0 5px;
          }
          .you {
            color: #79bbff;
            font-weight: bold;
          }
          .me {
            color: rgb(226, 19, 88);
            font-weight: bold;
          }
        }
        /*回复列表内容*/
        .reply-content {
          color: #303133;
          margin: 5px 0;
          padding-left: 12px;
        }
        .footer {
          padding-left: 12px;
          .reply {
            margin-left: 5px;
          }
        }
      }
    }
  }
  .reply {
    color: #909399;
    &:hover {
      color: #79bbff;
      cursor: pointer;
    }
  }
}
</style>